<template lang="html">
    <mu-container class="my-invitee">
      <mu-appbar style="width: 100%;text-align:center;" :color="getColor">
        </mu-button>
        {{title}}
        <mu-button flat slot="right" @click="toggleFn">{{isShow?'收起':'展开'}}</mu-button>
    </mu-appbar>
     <div class="my-income" v-if="isShow">
          <mu-expansion-panel v-for="(item,index) in getQArr" :key="index">
              <div slot="header">
                  <mu-chip class="demo-chip" :color="utils.randomColor()">
                      <mu-avatar size="25" :color="utils.randomColor()">{{index+1}}</mu-avatar>
                   {{kname}}
                  </mu-chip>
				 <span class="title-item" v-html="item"></span>
              </div>
              <div class="user-info-box" v-show="true">
               暂无
              <!-- 头部结束============================================================ -->
              </div>
            </mu-expansion-panel>
     </div>
    </mu-container>
  

</template>

<script lang="js">
  export default  {
	props:{
		show:{
			type: Boolean,
			default: false
		},
		kname:{
			 type: String,
			 default: '高频'
		},
		title: {
			type: String,
			default: "问题列表"
		},
		data:{
			type: Array,
			default:　new Array()
		}
	},
	created() {
		this.isShow = this.show;
	},
    mounted() {
		
    },
    data() {
      return {
		isShow:false
      }
    },
    methods: {
		toggleFn(){//显示隐藏 
			this.isShow = !this.isShow;
		}
    },
    computed: {
		getColor(){
			return this.utils.randomColor();
		},
		getQArr(){
			return this.data.map((item)=>{
				return item.replace(/(`.*?`)/g,function(reg, $1){
					console.log($1);
					var html = $1.substr(1,$1.length-2);
					return '<strong style="color: rgb(213, 0, 0);"> '+html+' </strong>';
				})
			})
		}
    }
}
</script>

<style scoped lang="less">
.my-invitee {

}
.tips{
  padding:20px 10px 0;
  text-indent: 2em;
  color:#f44336;
}
.jifen{
  font-weight: 700;
  color:#f44336;
}
.jifen-btn-box{
  padding-top:20px;
  text-align: center;
}
.jifen-btn-box>a:nth-of-type(1){
  position: relative;
  right:2px;
}
.jifen-btn-box>a:last-child{
  position: relative;
  left:2px;
}
.line-box{
  overflow: hidden;
  width:100%;
}
.book-list li{
  padding: 15px 0 15px;
  border-bottom: 1px solid #eee;
}
.book-list li:first-child{
  padding-top:0;
}
.book-list li:last-child{
  border-bottom: none;
}
.book-list li h3{
  font-weight: normal;
}
.income-box{
  padding:20px 0 0 0;
  min-height: 80px;
}
.income-box{
  display: flex;
}
.income-box .first{
  justify-content: space-around;
  text-align: center;
}
.income-box .first:first-child{
  width:120px;
}
.income-box .item{
  flex:1;
}
.income-box .first>p:first-child{
  font-size:18px;
  color:#e65100;
}
.income-box .first>p:last-child{
  color:#212121;
  font-size:12px;
}
.title-item{
	padding-left: 5px;
}

</style>
